<template>
  <div class="list">
    <h3 class="list-title">去哪儿推荐</h3>
    <dl v-for="(item, index) of list" :key="index" class="border-top">
      <dt>
        <h2>{{item.title}}</h2>
        <p>{{item.time}}</p>
        <p>
          <span v-for="(i, k) of item.flag" :key="k" v-if="i == 1" class="border">自营</span>
          <span v-for="(i, k) of item.flag" :key="k" v-if="i == 2" class="border">条件退</span>
          <span v-for="(i, k) of item.flag" :key="k" v-if="i == 3" class="border">无购物</span>
        </p>
      </dt>
      <dd>
        <h2>￥{{item.price}}</h2>
        <p>预订</p>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          title: '上海海洋水族馆+东方明珠广播电视塔B票（成人票）',
          price: '288',
          time: '可订11月11日',
          flag: ['1', '2']
        },
        {
          title: '上海海洋水族馆成人票+东方明珠地标乐园+全球梦幻旅行门票',
          price: '228',
          time: '可订明日',
          flag: ['1', '2']
        },
        {
          title: '【11月大促】成人日场半价活动票',
          price: '115',
          time: '可订11月11日',
          flag: ['1', '2']
        },
        {
          title: '上海欢乐谷全日成人票包含夜场  全天票',
          price: '211',
          time: '15:30前可订明日',
          flag: ['2', '3']
        },
        {
          title: '上海欢乐谷(全天)门票双人票',
          price: '430',
          time: '23:59前可订明日',
          flag: ['3']
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_style/var.styl'
.border::before
  border-color:$bgColor
.list
  width:100%
  overflow:hidden
  font-size:.32rem
  margin-top:.2rem
  background:#fff
  dl
    width:100%
    float:left
    line-height:.8rem
    padding:.3rem .2rem
    box-sizing:border-box
    border-color:#cacaca
    display:flex
    dt
      float:left
      color: #616161
      flex:1
      overflow: hidden
      h2
        width:100%
        font-size:.3rem
        line-height:.42rem
        ellipsis()
      p
        font-size:.24rem
        line-height:.34rem
        span
          color:$bgColor
          border-radius:.1rem
          padding:1px 2px
    dd
      float:right
      width:2rem
      text-align:center
      h2
        width:100%
        color:#ff9800
        font-size:.35rem
        line-height:.42rem
      p
        width:100%
        height: .6rem
        line-height: .6rem
        border-radius:.4rem
        color: #fff
        font-size: .28rem
        background:#ff9800
  .list-title
    height: .88rem
    line-height: .88rem
    background: #fff
    color: #333
    font-size: .32rem
    background: url('')
    background-repeat: no-repeat
    background-size: .36rem .36rem
    background-position: 0.2rem center
    text-indent: .7rem
</style>
